<template>
  <div id="header">
    <el-row>
      <el-col :span="8">
        <ul class="navigation">
          <router-link to="/" class="home-link">
            <li>Home</li>
          </router-link>
          <router-link to="/about" class="About-link">
            <li>About</li>
          </router-link>
          <router-link to="/timeline" class="TimeLine-link">
            <li>TimeLine</li>
          </router-link>
          <!--<router-link to="/photo" class="Photo-link">
            <li>Photo</li>
          </router-link>-->
          <router-link to="/topic" class="Share-link">
            <li>Topic</li>
          </router-link>
        </ul>
      </el-col>
    </el-row>
    <el-divider></el-divider>
  </div>
</template>

<script>
import authorization from "@/utils/authorization";

export default {
  name: "BlogHeader1",

  data: function() {
    return {
      searchText: "",
      username: "",
      hasLogin: false,
      isSuperuser: JSON.parse(localStorage.getItem("isSuperuser.myblog")),
      showModal: false,
      show: true,
    };
  },

  mounted() {
    authorization().then((data) => ([this.hasLogin, this.username] = data));
  },

  methods: {
    refresh() {
      this.username = localStorage.getItem("username.myblog");
    },
    logout() {
      localStorage.clear();
      window.location.reload(false);
    },
    toUrl(url) {
      //window.location.href=url;
      window.open(url, "_blank");
    },
  },
  created() {
    let urlTemp1 = "static/touxiang.jpg";
    this.imgUrl1 = require("@/" + urlTemp1);
    let urlTemp2 = "static/qq.jpg";
    this.imgUrl2 = require("@/" + urlTemp2);
    let urlTemp3 = "static/gongzhonghao.jpg";
    this.imgUrl3 = require("@/" + urlTemp3);
  },
};
</script>

<style scoped>
/* 下拉按钮样式 */
.dropbtn {
  background-color: white;
  color: black;
  padding: 8px 8px 30px 8px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  height: 16px;
  border-radius: 5px;
}
/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* 下拉内容 (默认隐藏) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 120px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
}
/* 下拉菜单的链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
  background-color: LightSkyBlue;
}
</style>

<style scoped>
#header {
  text-align: center;
  margin-top: 20px;
}

.login-link {
  color: black;
  text-decoration: none;
}
.login-link:hover {
  color: LightSkyBlue;
}
.login {
  text-align: right;
  padding-right: 100px;
  padding-top: 30px;
}

.navigation {
  font-family: "Verdana";
  font-weight: 500;
  font-style: normal;
  color: black;
  display: table-cell;
}
.home-link {
  color: black;
  text-decoration: none;
  padding: 15px;
}
.home-link:hover {
  color: LightSkyBlue;
}
.About-link {
  color: black;
  text-decoration: none;
  padding: 15px;
}
.About-link:hover {
  color: LightSkyBlue;
}
.TimeLine-link {
  color: black;
  text-decoration: none;
  padding: 15px;
}
.TimeLine-link:hover {
  color: LightSkyBlue;
}
.Photo-link {
  color: black;
  text-decoration: none;
  padding: 15px;
}
.Photo-link:hover {
  color: LightSkyBlue;
}
.Share-link {
  color: black;
  text-decoration: none;
  padding: 15px;
}
.Share-link:hover {
  color: LightSkyBlue;
}

li {
  display: inline;
}

.el-col {
  border-radius: 4px;
}
</style>
